<template>
  <div class="violation">
    <div class="header">
      <div><span style="color: darkgrey">首页/</span>平台动态</div>
    </div>
    <div class="subject">
      <table>
        <thead>
          <tr>
            <th style="width: 80px">序号</th>
            <th style="width: 60%">平台动态标题</th>
            <th>发布时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="read-btn">
              <img src="../assets/images/主页/u19.png" alt="" title="" />
            </td>
            <td>{{ item.title }}</td>
            <td>{{ item.time }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.violation {
  width: 90vw;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 20px;
  max-width: 1200px;
}

.header {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
    border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 201, 164, 1);
  width: 80px;
  height: 20px;
  font-size: 8px;
  color: aliceblue;
}

.subject {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  white-space: nowrap;
}

td:nth-child(2) {
  white-space: normal;
  padding-left: 20px;
}

th {
  color: #909399;
  font-weight: 500;
  font-size: 14px;
  background: #20c9a4;

  color: white;
}

td {
  font-size: 14px;
  color: #606266;
}

.check {
  color: #20c9a4;
  cursor: pointer;
}

tr:hover {
  background-color: #f5f7fa;
}

.read-btn {
  width: 40px;
  text-align: center;
  cursor: pointer;
}

.read-btn img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: '01',
          title: '四川省交通建设集团有限责任公司智能化转场招标采购的公示',
          time: '2022-04-13',
        },
        {
          id: '02',
          title: '校工会全互通能平板采购竞价成交公告',
          time: '2022-04-13',
        },
        {
          id: '03',
          title: '平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示',
          time: '2022-04-13',
        },
        {
          id: '04',
          title: '三一智能电机-母部放电设备-招标招标公告-ZB202304130003\\n\\n项目标名',
          time: '2022-04-13',
        },
        {
          id: '05',
          title: '中电鸿信信息科技有限公司2023年智务室智能化改造项目单一来源采购方案公示',
          time: '2022-04-13',
        },
        {
          id: '06',
          title: '海头镇宅基村土地发包项目',
          time: '2022-04-13',
        },
        {
          id: '07',
          title: '先锋创业大楼（515-1室）60㎡',
          time: '2022-04-13',
        },
        {
          id: '08',
          title: '万达开绿色智能精密产业园项目（二期）比选结果公告',
          time: '2022-04-13',
        },
        {
          id: '09',
          title: '2023年度工伤基金待复支付智能审核监控项目竞争性磋商公告',
          time: '2022-04-13',
        },
        {
          id: '10',
          title: '万达开绿色智能精密产业园项目（三期）比选结果公告',
          time: '2022-04-13',
        },
        {
          id: '11',
          title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
          time: '2022-04-13',
        },
        {
          id: '12',
          title: '保马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金',
          time: '2022-04-13',
        },
        {
          id: '13',
          title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目',
          time: '2022-04-13',
        },
        {
          id: '14',
          title: '保马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金',
          time: '2022-04-13',
        },
        {
          id: '15',
          title: '【次氯酸钠贮存罐修理】采购公告 附件',
          time: '2022-04-13',
        }
      ]
    }
  }
}
</script>